{% extends 'index.html' %}

{% block head %}
<style type="text/css">
    .display_none{display: none;}
</style>

{% endblock %}

{% block bodyweigh %}
<body style="width: 2000px; background-size: 2000px 100%;"">
{% endblock %}

{% block content %}

    <!-- 右侧主体开始 -->
        <div class="page-content" >
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <label class="layui-form-label xbs768">日期范围</label>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username" id="name"  placeholder="请输入战队名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <div class="layui-btn" id="search" ><i class="layui-icon">&#xe615;</i></div>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px" id="counts"></span></xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            ID
                        </th>
                        <th>
                            战队类型
                        </th>
                        <th>
                            战队赛点
                        </th>
                        <th>
                            比赛场次
                        </th>
                        <th>
                            战队名称
                        </th>
                        <th>
                            战队徽章
                        </th>
                        <th>
                            战队宣言
                        </th> 
                        <th>
                            创建时间
                        </th>  
                        <th>
                            是否热门战队
                        </th>                 
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody id="team">
                   
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
{% endblock %}

{% block script %}
 <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //
          

          
          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };
          
          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };
          
          document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
          }
          document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
          }
          
        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }



        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h); 
        }

        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
        </script>

        
        <script>


            $("#counts").html("共有数据：{{ data|count }} 条")

            {% for i in data %}      

                    $("#team").append(

                            '<tr>'+
                                '<td>'+
                                    '<input type="checkbox" value="{{loop.index}}" name=""> '+
                                '</td>'+
                                '<td>'+
                                    '{{loop.index}}'+
                                '</td>'+
                                '<td>'+
                                    '<input style="color: #000;" type="text" class="title" value="{{ i.team_title }}">'+
                                '</td>'+
                                '<td>'+
                                    '{{ i.team_point }}'+
                                '</td>'+
                                '<td>'+
                                    '{{ i.team_game_num }}'+
                                '</td>'+
                                '<td>'+
                                    '<input style="color: #000;" type="text" class="name" value="{{ i.team_name }}">'+
                                '</td>'+
                                '<td>'+                      
                                    '<img style="width:50px;height:50px" src="{{ i.team_icon }}" >&emsp;&emsp;<input type="file" class="image" accept="image/*"/><input type="hidden" class="imgurl" value=""/><input type="hidden" class="is_change" value="0"/>'+
                                '</td>'+
                                '<td>'+                      
                                    '<input style="color: #000;" type="text" class="detail" value="{{ i.team_details }}">'+
                                '</td>'+      
                                '<td>'+
                                    '{{ i.team_create_time }}'+
                                '</td>'+                  
                                '<td>'+    
                                    '<select id="select{{loop.index}}" style="color: #000;"> <option style="color: #000;" value ="0" {% if i.star_flag==0 %}selected = "selected"{% else %}{% endif %} >普通战队</option><option style="color: #000;" value ="1" {% if i.star_flag==1 %}selected = "selected" {% else %}{% endif %} >明星战队</option></select><input type="hidden" class="star_flag" value="{{ i.star_flag }}"/>'+
                                '</td>'+                        
                                '<td class="td-manage">'+
                                    '<button type="button" style="color: #000;" class="modify">保存</button>  &emsp;'+
                                    '<button type="button" style="color: #000;" class="delete">删除</button>'+
                                '</td>'+
                                '<input type="hidden" class="id" value="{{ i.team_id }}"  />'+
                            '</tr>')


                    $("#select{{loop.index}}").on("click",function(){
                        var star_flag = $("#select{{loop.index}} option:selected").val();
                        $(this).next().val(star_flag);
                    });

            {% endfor %}

            

        </script>
        <script>
            $(".modify").on("click",function(){
                var id = $(this).parent().parent().find(".id").val();
                var title = $(this).parent().parent().find(".title").val();
                var name = $(this).parent().parent().find(".name").val();
                var detail = $(this).parent().parent().find(".detail").val();
                var star_flag = $(this).parent().parent().find(".star_flag").val();
        
                    if (title != "竞技战队" && title != "贴吧战队") {
                        alert('战队类型请填写"竞技战队"或"贴吧战队"');
                        return false;
                    }

                params = {
                    "id":id,
                    "title":title,
                    "name":name,
                    "detail":detail,
                    "star_flag":star_flag,
                };
                $.ajax({
                    url:"/app/team/modify",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/team";
                        }else {
                            alert(res.msg);
                        }
                    }
                });
            });
        
            $(".delete").on("click",function(){
                var id = $(this).parent().parent().find(".id").val();
                params = {"id":id};
                $.ajax({
                    url:"/app/team/delete",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/team";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
            });
            
            $("#search").on("click",function(){

                var name = $("#name").val();

                if ( name == "" ) {
                    location.href="/app/show/team";
                }else{

                    location.href="/app/show/team?name="+name;
                }
            });


    </script>

{% endblock %}